<template>
	<div id="my-cptt">
		<div class="cptt-title">
			我报名的比赛
		</div>
		<van-collapse v-model="activeCptt" accordion>
			<van-collapse-item
			v-for="(i,index) in CPTTS"
			:name="index+''"
			:disabled="i.isGoing"
			>
			<template #title>
				<span class="my-cptt-name">
					/*{{i.id}}*/{{i.name}}
				</span>
				<van-tag 
				:type="i.state?'success':'warning'" >
					{{i.state?'报名中':'已截止'}}
				</van-tag>
				<van-tag 
				:type="i.isGoing?'danger':'success'" >
					{{i.isGoing?'已开始':'未开始'}}
				</van-tag>
			</template>
			<div class="my-cptt-main">
				<span>
					距比赛开始还有
					<b>{{Math.ceil(
						(new Date(i.goingtime) - new Date())/3600
					)}}</b>
					h
				</span>
				<br>
				<div class="paisai" v-if="i.groupingUsers">
				<span class="text">比赛分组:</span>
					<div class="p-fa">
						<hr align="left">
						<van-divider/>
						<p v-for="o in i.groupingUsers">
							{{o}}
						<van-divider />
						</p>
						<hr align="left">
					</div>
				</div>
				<br>
				<van-button
				type="warning"
				size="small"
				@click="delApplay(index)"
				>取消报名</van-button>
				
			</div>
			</van-collapse-item>
		</van-collapse>
	</div>
</template>

<script>
	import { Toast,Dialog } from 'vant'
	export default{
		name:"MyCptt",
		data(){
			return{
				CPTTS:[],
				activeCptt:'0',
				// isGroup:[]
			}
		},
		created() {
			//所有cptt_id 
			Toast.loading({
			  message: '加载中...',
			  forbidClick: true,
			  duration: 0,
			});
			let uId = this.$store.state.login.user.uId
			if(uId == undefined)//不为空
				{
					this.$router.push('/login')
					Toast.fail('请登录');
				}
			else
				setTimeout(()=>{
					this.creatMain(uId)
				},1000)
		},
		computed:{
		},
		methods:{
			creatMain(uId){
				axios.get('./api/GetApplay?type=1&key='+uId)
					.then(result=>{
						if(result.status === 200)
							this.CPTTS = this.$store.state.cptts
										.filter(e=>result.data.includes(e.id))
						return axios.get("./api/GetGroup?key="+uId)
					})
					.then(e=>{
						// console.log(e.data.data);
						let result = e.data.data
						result.forEach(e=>{
							this.CPTTS.forEach(cptt=>{
								if(e.id == cptt.id)
									cptt.groupingUsers = e.groupingUsers
							})
						})
						Toast.loading({
							message: '加载中...',
							duration: 20,
						});
					})
					.catch(error=>{
						Toast.fail('加载失败');
						console.log(error)
					})
			},
			delApplay(index){
				let blacklist = false;
				let delWarning =()=>{
					return Dialog.confirm({
						title: '警告',
						message:warningStr+'如果退出比赛将不能继续报名',
						theme: 'round-button',
					})
					.then(()=>{
						blacklist = true;
						return delConfirm()
					})
					.catch(()=>{throw new Exception()})
				}
				let delConfirm =()=>{
					return Dialog.confirm({
						title: '退出比赛',
						message: '确定要退出比赛嘛?',
						theme: 'round-button',
					})
					.then(()=>{
						Toast.loading({
							message: 'loading...',
							forbidClick: true,
							duration:0,//等待被替换
						})
						return delApplayPost()
					})
					.catch(()=>{throw new Exception()})
				}
				let delApplayPost = ()=>{
					return axios.post('./api/MakeApplay',
					{
						applay:{
								cid: this.CPTTS[index].id,
								uid: this.$store.state.login.user.uId
							   },
						isApplay:true,
						blacklist,
					})
					.then(e=>e).catch(e=>e)//在最后.then里取消loading
				}
				//如果
				// 1、报名已经结束（state==false
				// =>>警告：不能再报名
				let state = this.CPTTS[index].state
				// 2、分组已经完成（noGroup==false//不需要这个...=>
				// =>>警告：不能再报名
				let noGroup = this.CPTTS[index].groupingUsers==undefined
				let warningStr = (state==false? '该比赛报名已经结束报名，':
								  noGroup==false? '您参与的该比赛已经分组完成，':'')
				let fun = warningStr? delWarning() : delConfirm()
				fun.then(e=>{
					console.log(e)
					Toast({
						message:e.data.info,
						icon:e.data.info,
						duration:1000
					});
					this.CPTTS.splice(index,1)
					this.activeCptt=''
					/*
					添加不能再报名标识
					*/
				})
			},
		}
		
	}
</script>

<style scoped lang="scss">
#my-cptt{
	.cptt-title{
		margin: 0;
		padding: 16px 16px 16px;
		// color: rgba(69, 90, 100, 0.6);
		font-weight: 700;
		font-size: 14px;
		line-height: 16px;
	}
	.van-cell__title{
		display: flex;
		.van-tag{
			margin-right: 1px;
		}
	}
	.my-cptt-name{
		width: 60%;
		white-space: nowrap;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 700;
	}
	.my-cptt-main{
		padding-left: 1.25rem;
		color: #000000;
		// display: flex;	
		.paisai{
			padding-top: 1rem;
			.p-fa{
				width: auto;
				border-left: 2.5px solid #ebedf0;
				hr{
					width: 10%;
					// background: black;
					background: #ebedf0;
					height: 2.5px;
					border: none;
				}
				>.van-divider,p{
					padding-left: 0.5rem;
				}
				.van-divider{
					border-color: #666;
				}
			}
			.text{
				font-weight: 700;
				
			}
		}
	}
}
</style>
